<!--
* @description 选择合同列表
  @params dialogFormVisible 显示
  @params saveContractId 存储方法
  @params apiName_params 列表接口名
!-->

<!-- 单页面需要多个上传组件 -->
<template>
	<div>
		<el-dialog title="选择记录（多选记录点击确认）" :before-close="tableSelect" :visible.sync="dialogFormVisible" width='80%'>
			<div>
				<div>
					选中根数：{{ lengthTotal }} 选中国标总数：{{ nationQuantityTotal }}
				</div>
				<div class="flex-row title2Wrap flex-alignCenter" >
					<el-select v-model="num1" placeholder="请选择" clearable filterable style="width:100px;margin-right:10px">
						<el-option v-for="item in tableData.length" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-select v-model="num2" placeholder="请选择" clearable filterable style="width:100px;margin-right:10px">
						<el-option v-for="item in tableData.length" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>

					<el-button @click="toggleSelection()">切换第{{num1}}到{{num2}}行状态</el-button>
				</div>
				<!-- 表格 -->
				<div style="margin-top: 10px">
					<el-table :data="tableData" ref='multipleTable' style="width: 100%" class="tableScroll" highlight-current-row @current-change="" @selection-change="handleSelectionChange" row-key="id">
						<el-table-column type="selection" width="60"> </el-table-column>
						<el-table-column prop="woodNumber" label="根号"></el-table-column>
						<el-table-column prop="treeType" label="树种" :width="flexColumnWidth('treeType',tableData.records)"></el-table-column>
						<el-table-column prop="goodsName" label="品名" :width="flexColumnWidth('goodsName',tableData.records)"></el-table-column>
						<el-table-column prop="heap" label="堆号"></el-table-column>
						<el-table-column prop="length" label="长度"></el-table-column>
						<el-table-column prop="diameter" label="直径"></el-table-column>
						<el-table-column prop="" label="厚度"></el-table-column>
						<el-table-column prop="" label="宽度"></el-table-column>
						<el-table-column prop="nationQuantity" label="国标"></el-table-column>
						<el-table-column prop="foreignQuantity" label="外标"></el-table-column>
					</el-table>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tableSelect(selectList)">确 定</el-button>
				<el-button @click="tableSelect">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: 'page',
	props: {
		dialogFormVisible: {
			type: Boolean,
			default: false,
		},
		checkCode: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			tableData: [],
			searchList: {
				pageNum: 1,
				pageSize: 7,
			},
			selectList: [],
			isSelect: [], //已选中id
			lengthTotal: 0,
			nationQuantityTotal: 0,
				num1: '1',
			num2: '2',
		};
	},
	created() {
		// this.getData();
	},
	methods: {
			toggleSelection() {
			var rows = [];
			this.tableData.map((item, index) => {
				if (index >= this.num1 - 1 && index <= this.num2 - 1) {
					rows.push(item);
				}
			});
			console.log(rows);
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		//重置按钮
		clear() {
			this.searchList = this.$options.data().searchList; //用原始data里的对象替代现有对象
			this.getData();
		},
		handleSelectionChange(val) {
			console.log(val);
			this.selectList = val;
			var nationQuantityTotal = 0;
			val.map((item) => {
				nationQuantityTotal += Number(item.nationQuantity);
			});
			this.lengthTotal = val.length;
			this.nationQuantityTotal = Number(nationQuantityTotal).toFixed(3);
		},
		//增加搜索条件
		addSearchCriteria(key, value) {
			this.searchList[key] = value;
			console.log(this.searchList);
		},
		tableSelect(val) {
			if (val[0] && val[0].id) {
				val = this.cloneObjectFn(val);
				// 存储选中数据
				this.isSelect = [...this.isSelect, ...val];
			}
			this.$emit('saveId', val);
		},
		delisSelect(val) {
			console.log(val);
			val.map((item, index) => {
				this.isSelect.map((item2, index2) => {
					if (item == item2.id) {
						this.isSelect.splice(index2, 1);
					}
				});
			});
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.pageSize = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.pageNum = val;
			this.getData();
		},
		getData(pageNum) {
			var apiName = 'page_inDetail';
			this.searchList.checkCode = this.checkCode;
			this.$myApi[apiName](this.searchList).then((res) => {
				if (res.code == 200) {
					console.log(1, this.isSelect);
					console.log(2, res.data);
					this.isSelect.map((item, index) => {
						res.data.map((item2, index2) => {
							if (item.id == item2.id) {
								console.log(res.data, index);
								res.data.splice(index2, 1);
							}
						});
					});
					this.tableData = res.data;
				}
			});
		},
	},
};
</script>
<style scoped>
.key2 {
	margin-right: 10px;
	white-space: nowrap;
}
</style>
